 <template>
    <div class="raiseGoods">
        <div class="z-header tc width-75 b-c2 c-f">
            <div @click="$router.back(-1)" class="lt">
                <i class="iconfont icon-zuo m-t-18"></i>
            </div>
            <div class="fs-36">
                我的筹帮
            </div>
        </div>
        <mt-navbar class="page-part" v-model="selected">
            <mt-tab-item id="1">我发布的</mt-tab-item>
            <mt-tab-item id="2">我买到的</mt-tab-item>
        </mt-navbar>
        <!-- tabcontainer -->
        <mt-tab-container v-model="selected" swipeable>
            <mt-tab-container-item id="1">
                <nav>
                    <ul>
                        <li v-for="list in mySale">
                            <div class="index-blank m-t-28">
                            </div>
                            <!--<div class="row m-t-18 width-75">
                                    <div>
                                        <img src="../../img/cj.png" alt="" class="portrait">
                                    </div>
                                    <div class="m-l-14">
                                        <h2 class="fs-36 c-3">小黄</h2>
                                        <p class="fs-24 c-3 m-t-1">蜡笔小新</p>
                                    </div>
                                </div>-->
                            <div class="b-f4 width-75 p-b-2">
                                <div class=" flex">
                                    <div class="row">
                                        <p v-if="list.goods.images != ''">
                                            <img :src="list.goods.images" class="goods-img ">
                                        </p>
                                        <div class="m-t-4 m-l-25">
                                            <p class="fs-32">{{list.goods.caption}}</p>
                                            <p class="fs-24 m-t-6">{{list.goods.introduce}}</p>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="m-t-6">价格: ￥{{list.goods.price}}</div>
                                        <div class="m-t-6">邮费: ￥{{list.goods.mailPrice}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 1">
                                <button class="b-f">已付款未发货</button>
                                <button class="goods-status b-f m-l-14" @click="shipments(list.order.goodsOrderId)">确认发货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 2">
                                <button class="b-f">已发货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 3">
                                <button class="b-f">完成交易</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 4">
                                <button class="b-f">申请退货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 5">
                                <button class="b-f">同意退货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 6">
                                <button class="b-f">拒绝退货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 7">
                                <button class="b-f">申诉</button>
                            </div>
                        </li>
                    </ul>
                </nav>

            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <nav>
                    <ul>
                        <li v-for="list in purchase">
                            <div class="index-blank m-t-28">
                            </div>
                            <div class="b-f4 width-75 p-b-2">
                                <div class=" flex">
                                    <div class="row">
                                        <p v-if="list.goods.images != ''">
                                            <img :src="list.goods.images" class="goods-img ">
                                        </p>
                                        <div class="m-t-4 m-l-25">
                                            <p class="fs-32">{{list.goods.caption}}</p>
                                            <p class="fs-24 m-t-6">{{list.goods.introduce}}</p>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="m-t-6">价格: ￥{{list.goods.price}}</div>
                                        <div class="m-t-6">邮费: ￥{{list.goods.mailPrice}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 1">
                                <button class="b-f">已付款未发货</button>
                                <button class="goods-status b-f m-l-14">等待发货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 2">
                                <button class="b-f">已发货</button>
                                <button class="goods-status b-f m-l-14" @click="notarize(list.order.goodsOrderId)">确定收货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 3">
                                <button class="b-f">完成交易</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 4">
                                <button class="b-f">申请退货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 5">
                                <button class="b-f">同意退货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 6">
                                <button class="b-f">拒绝退货</button>
                            </div>
                            <div class="width-75 z-header tr fs-3" v-if="list.order.orderStates == 7">
                                <button class="b-f">申诉</button>
                            </div>
                        </li>
                    </ul>
                </nav>
            </mt-tab-container-item>
        </mt-tab-container>

    </div>
</template>
<script>
import { z } from '../../assets/js/common'
export default {
    data() {
        return {
            selected: '1',
            mySale: "",//用来保存自己卖出商品的信息
            purchase: "",  //自己购买的商品的信息
        };
    },
    methods: {
        // 自己卖出的商品
        sale() {
            this.$http({
                method: "post",
                url: localPath + "/goods/selectMyToGoodsOrder"
            }).then((data) => {
                this.mySale = data.data.message;
            }).catch((error) => {
                console.log(error);
            })
        },
        // 自己买入的商品
        buy() {
            this.$http({
                method: "post",
                url: localPath + "/goods/selectMyInGoodsOrder"
            }).then((data) => {
                this.purchase = data.data.message;
                console.log(this.purchase);
                sale();
            }).catch((error) => {
                console.log(error);
            })
        },
        // 确认发货
        shipments(src) {
            var params = new URLSearchParams();
            params.append("goodsOrderId", src);
            this.$http({
                method: "post",
                url: localPath + "/goods/updateOrdetStates1To2",
                data: params
            }).then((data) => {
                console.log(data.data.message);
               this.sale();
                this.buy(); 
            }).catch((error) => {
                console.log(error);
            })
        },
        // 确认收货
        notarize(src) {
            var params = new URLSearchParams();
            params.append("goodsOrderId", src);
            this.$http({
                method: "post",
                url: localPath + "/goods/updateOrdetStates2To3",
                data: params
            }).then((data) => {
                console.log(data.data.message);
                this.sale();
                this.buy();
            }).catch((error) => {
                console.log(error);
            })
        }

    },
    mounted() {
        this.sale();
        this.buy();
         document.addEventListener(z());
    },
};
</script>
<style>
.goods-img {
    width: 1.44rem;
    height: 1.6rem;
    margin: .3rem 0;
}

.goods-status {
    padding: .1rem .2rem;
    border-radius: 6px;
    border: solid 1px #c29354;
}
</style> 